<template>
   <template
      v-for="(item, idx) in menu"
      :key="item.name">
      <!-- 渲染菜单项 -->
      <RouterLink
         v-if="!item.submenu"
         :to="item.path">
         <el-menu-item :index="parentIndex + idx">
            <el-icon v-if="item.iconName">
               <EpIcon :icon="icons[item.iconName]" />
            </el-icon>

            <template #title>
               {{ item.name }}
            </template>
         </el-menu-item>
      </RouterLink>

      <!-- 渲染子菜单 -->
      <el-sub-menu
         v-else
         :index="parentIndex + idx">
         <template #title>
            <el-icon v-if="item.iconName">
               <EpIcon :icon="icons[item.iconName]" />
            </el-icon>

            <span>{{ item.name }}</span>
         </template>

         <!-- 对子菜单实施递归 -->
         <EpMenuUnit
            :menu="item.submenu"
            :parentIndex="`${parentIndex}${idx}-`" />
      </el-sub-menu>
   </template>
</template>

<script setup>
import EpIcon from "./EpIcon.vue";

import {
   Document,
   Menu,
   Location,
   User,
   Film,
   VideoCamera,
   Odometer,
   Loading,
   Star,
   PictureFilled,
   PieChart,
   Grid,
} from "@element-plus/icons-vue";

const icons = {
   Document,
   Menu,
   Location,
   User,
   Film,
   VideoCamera,
   Odometer,
   Loading,
   Star,
   PictureFilled,
   PieChart,
   Grid,
};

const { activeIndex, menu, parentIndex } = defineProps({
   activeIndex: String,
   menu: Array,
   parentIndex: String,
});
</script>

<style lang="scss" scoped></style>
